<template>
	<view class="container">
		<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" ref="lineChart" />
	</view>
</template>

<script>
	import * as echarts from '@/components/echarts/echarts.simple.min.js';
	import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';

	let lineOption = {
		animation: false,
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				lineStyle: {
					color: '#fff',
				},
				formatter: function(params) {
					console.log('aaa');
					console.log(params);
					return params;
				},
			}
		},
		grid: {
			left: 0,
			top: 30,
			right: 0,
			bottom: 30
		},
		xAxis: [{
			type: 'category',
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
		}],
		yAxis: [{
			type: 'value'
		}],
		legend: {
			data: ['蒸发量', '蒸发量']
		},
		series: [{
			name: '蒸发量',
			type: 'line',
			data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
		}, {
			name: '降水量',
			type: 'line',
			data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
		}]
	};

	export default {
		data() {
			return {
				echarts: echarts
			}
		},
		methods: {
			lineInit(canvas, width, height) {
				let lineChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(lineChart)

				lineChart.setOption(lineOption)

				return lineChart
			}
		},
		components: {
			mpvueEcharts
		}
	}
</script>

<style>
	.container {
		width: 100%;
		height: 800upx;
		padding: 40upx;
	}
</style>
